<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>个人名片</title>
		<script src="../../../javascript/api.js"></script>  <!--api.js必须放到最开头 -->
	    <script src="../../../javascript/axios.js"></script>
	    <script src="../../../javascript/vue.js"></script>
	    <script src="../../../javascript/jquery.js" type="text/javascript" charset="utf-8"></script>
	    <script src="../../../javascript/layer/layer.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<style type="text/css">
			*{
	    		margin: 0;
	    		padding: 0;
	    		font-family: "微软雅黑";
	    	}
	    	li{
	    		list-style: none;
	    	}
	    	.title{
	    		width: 460px;
	    		height: 220px;
	    		background: #ddecfb;
	    		text-align: center;
	    	}
	    	.branch_name{
	    		font-size: 24px;
	    		color: #333333;
	    	}
	    	.branch_img{
	    		margin:35px 0 20px 0;
	    		width: 75;
	    		height: 75px;
	    	}
	    	.branch_detail{
	    		/*margin-top: 12px;*/
	    		height: 270px;
			    overflow-y: scroll;
			    overflow-x: hidden;
			    width: 100%;
	    	}
	    	.branch_detail ul{
	    		margin-top: 35px;
	    	}
	    	.branch_detail li {
			    color: #999999;
			    font-size: 18px;
			    /* text-align: center; */
			    /*height: 42px;*/
			    line-height: 42px;
			    text-align: left;
			    margin: 0px 0px 0px 130px;
			}
			.branch_detail li span {
			    margin-left: 40px;
			    color: #333333;
			    display: inline-block;
   				width: 200px;
			}
			.p_button button {
			    height: 40px;
			    width: 100px;
			    border-radius: 4px;
			    background: #3099EE;
			    color: #FFFFFF;
			    font-size: 16px;
			    border: solid 1px #3099EE;
			    margin: 0 40px;
			}
			.page_three {
			    width: 100%;
			    height: 100%;
			}
			.page_three p {
			    padding: 25px;
			    color: #999999;
			    font-size: 16px;
			}
			.page_three img {
			    width: 56px;
			    height: 56px;
			    margin-left: 25px;
			}
			.page_three span {
			    position: absolute;
			    font-size: 20px;
			    color: #333333;
			    top: 15px;
			    left: 100px;
			}
			.page_three textarea {
			    width: 408px;
			    height: 300px;
			    border: solid 1px #E6E6E6;
			    border-radius: 4px;
			    margin: 18px auto;
			    display: block;
			    box-sizing: border-box;
			    /* padding-left: 15px; */
			    font-size: 16px;
			    resize: none;
			        padding: 8px;
			}
			.page_three .button_cancel {
			    float: left;
			    margin-left: 23px;
			}
			.page_three button {
			    width: 88px;
			    height: 40px;
			    color: #FFFFFF;
			    background: #3099EE;
			    border: solid 1px #3099EE;
			    border-radius: 4px;
			    line-height: 40px;
			    text-align: center;
			    margin-top: 10px;
			}
			.page_three .button_send {
			    float: right;
			    margin-right: 23px;
			}
			.count_num{
				    position: absolute;
				    font-size: 16px;
				    color: #948a8a;
				    bottom: 110px;
				    right: 36px;
			}
			::-webkit-scrollbar-track-piece { /*滚动条凹槽的颜色，还可以设置边框属性*/
			background-color:#f8f8f8;
			}
			::-webkit-scrollbar {/*滚动条的宽度*/
			width:9px;
			height:9px;
			}
			::-webkit-scrollbar-thumb {/*滚动条的设置*/
			background-color:#dddddd;
			background-clip:padding-box;
			min-height:28px;
			}
			::-webkit-scrollbar-thumb:hover {
			background-color:#bbb;
			}
			.span_div{
				    display: inline-block;
    				vertical-align: top;
			}			
			.no_picture_div{
				width: 75px;
			    background: #85c0f9;
			    height: 75px;
			    text-align: center;
			    line-height: 75px;
			    border-radius: 50%;
			    font-size: 28px;
			    color: #fff;
			     border: solid 1px #FFF;
			    margin: 35px auto 25px auto;
    			display: inline-block;
			}
			    
	</style>
	<body>
		<div class="apiCheckBranch" id="apiCheckBranch">
			<div class="title" v-if="pageType==='1'">
				<img v-if="policeDetail.picture!=null&&policeDetail.picture != '0'&&policeDetail.picture != undefined"  :src="policeDetail.picture"/>
				<!--<img class="branch_img"  :src="policeImg"/>-->
				<div class="no_picture_div" v-else>
					{{policeDetail.name.charAt(policeDetail.name.length-1)}}
				</div>
				<p class="branch_name">{{policeDetail.name}}</p>
			</div>
			<div class="branch_detail" v-if="pageType==='1'">
				<ul>
					<li  v-if="policeDetail.orgSerialNo!=''&&policeDetail.orgSerialNo!=null"><div class="span_div">
						部门
					</div><span>{{policeDetail.orgSerialNo}}</span></li>
					<li  v-if="policeDetail.quarters!=''&&policeDetail.quarters!=null"><div class="span_div">
						岗位
					</div><span>{{policeDetail.quarters}}</span></li>
					<li  v-if="policeDetail.userNum!=''&&policeDetail.userNum!=null"><div class="span_div">
						警号
					</div><span>{{policeDetail.userNum}}</span></li>
					<li  v-if="policeDetail.mobile!=''&&policeDetail.mobile!=null"><div class="span_div">
						手机
					</div><span>{{policeDetail.mobile}}</span></li>
					<li  v-if="policeDetail.jobCategory!=''&&policeDetail.jobCategory!=null"><div class="span_div">
						警种
					</div><span>{{policeDetail.jobCategory}}</span></li>
					<li  v-if="policeDetail.lable!=''&&policeDetail.lable!=null"><div class="span_div">
						备注
					</div><span>{{policeDetail.lable}}</span></li>
				</ul>
			</div>
			<!--<p class="p_button" style="text-align: center; margin-top: 8px;" v-if="pageType==='1'">
				<button>取消</button> <button @click="addFriend">加为好友</button>
			</p>-->
			
			<div class="page_three" v-if="pageType==='2'">
				<p>
					你需要发送验证申请，等待对方通过。
				</p>
				<div class="" style="position: relative;">
					<img src="../../../images/lefticon/user.png"><span> 黄四里</span>
				</div>
				<div class="count_num">
					{{countNumNow}}/25
				</div>
				<textarea name="" v-model="textVal" rows="" cols="" placeholder=" 请输入验证信息" maxlength="25"></textarea>
				<button @click="goPageType_1" class="button_cancel">取消</button><button @click="send"  class="button_send">确定</button>
			</div>
		</div>
	</body>
	<script src="../js/addressApi.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			new Vue({
				el:"#apiCheckBranch",
				data:{
					loadingPerson:'',
					userId :'',
					policeImg:'../../../images/lefticon/user.png',
					pageType:'1',/*页面类型*/
					textVal:'',/*textarea的值*/
					policeDetail:{
						picture:'',
					}
				},
				methods:{
					addFriend(){
						this.pageType='2';
					},
					goPageType_1(){
						this.pageType='1';
					},
					send(){
						if(this.textVal.length===0||this.textVal.length>25){
							parent.layer.msg('请输入验证申请文字且不超过25字', {icon: 5,time:1500});
							return false;
						}else {
							parent.layer.msg('已经发送请求', {icon: 6,time:1500});
							setTimeout(function(){
								parent.layer.closeAll();			
							},1700)
						}
					},
				},
				computed:{
					countNumNow(){
						return this.textVal.length;
					}
				},
				mounted(){
					this.userId = getParam('val');
					apiPersonDetail(this.userId,this);						
				}
			})
		</script>
</html>
